<template>
  <div class="kw-diff">
    <el-card class="kw-diff__card">
      <div slot="header" class="clearfix">
        <span>输入 A</span>
        <span :style="{ float: 'right' }">{{ listA.length }} 行</span>
      </div>
      <el-input
        class="card-textarea"
        v-model="inputA"
        resize="none"
        rows="30"
        type="textarea"
      ></el-input>
    </el-card>

    <el-card class="kw-diff__card">
      <div slot="header" class="clearfix">
        <span>输入 B</span>
        <span :style="{ float: 'right' }">{{ listB.length }} 行</span>
      </div>
      <el-input
        class="card-textarea"
        v-model="inputB"
        rows="30"
        resize="none"
        type="textarea"
      ></el-input>
    </el-card>

    <el-card class="kw-diff__card">
      <div slot="header" class="clearfix">
        <span>输出</span>
        <span :style="{ float: 'right' }">{{ result.length }} 行</span>
      </div>
      <div class="card-result">
        <div class="result-order">
          <div class="item" v-for="(item, index) in result" :key="index">
            {{ index + 1 }}
          </div>
        </div>
        <div class="result-content">
          <div
            class="result-content__line"
            v-for="(item, index) of result"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'keyword-diff',
  data() {
    return {
      inputA: '',
      inputB: ''
    }
  },
  computed: {
    listA() {
      return this.filterLine(this.inputA)
    },
    listB() {
      return this.filterLine(this.inputB)
    },
    result() {
      const res = []
      for (const item of this.listB) {
        if (this.listA.indexOf(item) === -1) {
          res.push(item)
        }
      }
      return res
    }
  },
  methods: {
    filterLine(str) {
      return str
        .trim()
        .split('\n')
        .filter(v => v.length)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-card__body {
  padding: 0;
}
/deep/ .el-textarea__inner {
  height: 80vh;
}
.kw-diff {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  &__card {
    width: 32%;
    .card-textarea {
      height: 80vh;
    }
    .card-result {
      overflow: auto;
      display: flex;
      font-size: 14px;
      .result-order {
        display: flex;
        flex-direction: column;
        background-color: #e7e7e7;
        .item {
          width: 0.5rem;
          height: 0.3rem;
          line-height: 0.3rem;
          text-align: center;
        }
      }
      .result-content {
        flex: 1;
        &__line {
          padding-left: 20px;
          height: 0.3rem;
          line-height: 0.3rem;
          font-size: 14px;
          &:hover {
            background-color: #e7e7e7;
          }
        }
      }
    }
  }
}
</style>
